<template>
  <div class="module-one">
    <div class="wrap">
      <Row>
        <i-col span="24" class="module-title">
          <h3>微站优势</h3>
        </i-col>
      </Row>
      <Row>
        <i-col span="24" class="text g-mt20">
          <p>丰富模板、组件库 满足您的修改化需求，完美兼容小程序和公众号,体验更胜一筹</p>
        </i-col>
      </Row>
    </div>

    <Row class="tab">
      <div class="wrap clearfix">
        <i-col span="4" class="tab-item fl active">
          <div class="item-wrap">
            <i class="sb-bg app"></i>
            <p class="name g-mt15">毫秒级响应</p>
          </div>
        </i-col>

        <i-col span="4" class="tab-item fl">
          <div class="item-wrap">
            <i class="sb-bg app"></i>
            <p class="name g-mt15">云服务器</p>
          </div>
        </i-col>

        <i-col span="4" class="tab-item fl">
          <div class="item-wrap">
            <i class="sb-bg app"></i>
            <p class="name g-mt15">云储存</p>
          </div>
        </i-col>

        <i-col span="4" class="tab-item fl">
          <div class="item-wrap">
            <i class="sb-bg app"></i>
            <p class="name g-mt15">云数据库</p>
          </div>
        </i-col>
      </div>
    </Row>

    <Row class="tab-con g-mt30">
      <div class="wrap">
        <div class="tab-con-item active step">
          <h4 class="con-title">简单1步，微盟代发布，高效又便捷</h4>
          <div class="content g-mt20">
            <span class="step-item">
              <i class="sb-bg qr"></i>
              <span class="name g-mt5">第一步</span>
            </span>

            <span class="step-item">
              <i class="sb-bg qr"></i>
              <span class="name g-mt5">第一步</span>
            </span>

            <span class="step-item">
              <i class="sb-bg qr"></i>
              <span class="name g-mt5">第一步</span>
            </span>

            <span class="step-item">
              <i class="sb-bg it"></i>
              <span class="name g-mt5">第一步</span>
            </span>

            <div class="img-box">
              <img src="./1.png" alt="..." />

              <img src="./1.png" alt="..." />
            </div>
          </div>
        </div>

        <div class="tab-con-item pic">
          <h4 class="con-title">简单3步，微盟代发布，高效又便捷</h4>
          <div class="content g-mt20">
            <img src="./2.png" alt="..." />
          </div>
        </div>

        <div class="tab-con-item pics">
          <h4 class="con-title">简单3步，微盟代发布，高效又便捷</h4>
          <div class="content g-mt20 clearfix">
            <i-col span="4" class="pics-item">
              <img src="./3.png" alt="..." />
              <p class="name g-mt5">
                name
              </p>
            </i-col>

            <i-col span="4" class="pics-item">
              <img src="./3.png" alt="..." />
              <p class="name g-mt5">
                name
              </p>
            </i-col>

            <i-col span="4" class="pics-item">
              <img src="./3.png" alt="..." />
              <p class="name g-mt5">
                name
              </p>
            </i-col>

            <i-col span="4" class="pics-item">
              <img src="./3.png" alt="..." />
              <p class="name g-mt5">
                name
              </p>
            </i-col>

            <i-col span="4" class="pics-item last-item">
              more.....
            </i-col>
          </div>
        </div>

        <div class="tab-con-item pics">
          <h4 class="con-title">简单3步，微盟代发布，高效又便捷</h4>
          <div class="content g-mt20 clearfix">
            <i-col span="4" class="pics-item">
              <img src="./3.png" alt="..." />
              <p class="name g-mt5">
                name
              </p>
            </i-col>

            <i-col span="4" class="pics-item">
              <img src="./3.png" alt="..." />
              <p class="name g-mt5">
                name
              </p>
            </i-col>

            <i-col span="4" class="pics-item">
              <img src="./3.png" alt="..." />
              <p class="name g-mt5">
                name
              </p>
            </i-col>

            <i-col span="4" class="pics-item">
              <img src="./3.png" alt="..." />
              <p class="name g-mt5">
                name
              </p>
            </i-col>

            <i-col span="4" class="pics-item last-item">
              more.....
            </i-col>
          </div>
        </div>

        <div class="tab-con-item pic min">
          <h4 class="con-title">简单3步，微盟代发布，高效又便捷</h4>
          <div class="content g-mt20 clearfix">
            <img src="./4.png" alt="..." />
          </div>
        </div>

        <div class="tab-con-item ico-list">
          <h4 class="con-title">简单3步，微盟代发布，高效又便捷</h4>
          <div class="content g-mt20 clearfix">
            <i-col span="6" class="ico-list-item">
              <div class="item-wrap">
                <a href="#" class="link-wrap">
                  <i class="sb-bg app-code"></i>
                  <p class="name">name</p>
                </a>
              </div>
            </i-col>

            <i-col span="6" class="ico-list-item">
              <div class="item-wrap">
                <a href="#" link-wrap>
                  <i class="sb-bg app-code"></i>
                  <p class="name">name</p>
                </a>
              </div>
            </i-col>

            <i-col span="6" class="ico-list-item">
              <div class="item-wrap">
                <a href="#" link-wrap>
                  <i class="sb-bg app-code"></i>
                  <p class="name">name</p>
                </a>
              </div>
            </i-col>

            <i-col span="6" class="ico-list-item">
              <div class="item-wrap">
                <a href="#" link-wrap>
                  <i class="sb-bg app-code"></i>
                  <p class="name">name</p>
                </a>
              </div>
            </i-col>

            <i-col span="6" class="ico-list-item">
              <div class="item-wrap">
                <a href="#" link-wrap>
                  <i class="sb-bg app-code"></i>
                  <p class="name">name</p>
                </a>
              </div>
            </i-col>

            <i-col span="6" class="ico-list-item">
              <div class="item-wrap">
                <a href="#" link-wrap>
                  <i class="sb-bg app-code"></i>
                  <p class="name">name</p>
                </a>
              </div>
            </i-col>

            <i-col span="6" class="ico-list-item">
              <div class="item-wrap">
                <a href="#" link-wrap>
                  <i class="sb-bg app-code"></i>
                  <p class="name">name</p>
                </a>
              </div>
            </i-col>

            <i-col span="6" class="ico-list-item">
              <div class="item-wrap">
                <a href="#" link-wrap>
                  <i class="sb-bg app-code"></i>
                  <p class="name">name</p>
                </a>
              </div>
            </i-col>
          </div>
        </div>
      </div>
    </Row>
  </div>
</template>

<script type="text/ecmascript-6">
    import Row from 'iview/src/components/row'
    import iCol from 'iview/src/components/col'
    import $ from 'jquery'

    export default {
      data() {
        return {
          tabClassName: ['app', 'build-app', 'template', 'collect-form', 'data-ana', 'flow-entry'],
          tabConClassName: ['step', 'pic', 'pics', 'pics', 'pic', 'list'],
          tab: ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
        }
      },
      created() {
        this.bindTab();
      },
      methods: {
        bindTab() {
          // 点击添加class
          $(function () {
            let $moduleOne = $('.module-one');
            let $content = $moduleOne.find('.tab-con-item');
                $moduleOne.find('.tab-item').click(function () {
                  $(this).addClass('active').siblings('.tab-item').removeClass('active');
                  $content.eq($(this).index()).show().siblings('.tab-con-item').hide();
                });
          });
        }
      },
      components: {

      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .module-one
    padding-top: 60px
    .tab
      margin-top: 70px
      .tab-item
        position: relative
        cursor: pointer
        &:after
          display: none
          content: ''
          lbposition(50%, -30px)
          margin-left: -20px
          triangle-up(20px, $module-tabcon-bg)
        &.active:after
          display: block
        .item-wrap
          width: 140px
          margin: 0 auto
          text-align: center
          .sb-bg
            wh(60px, 60px)
          .name
            line-height: 18px
    .tab-con
      background-color: $module-tabcon-bg
      overflow: hidden
      .tab-con-item
        display: none
        -webkit-box-sizing: content-box
        -moz-box-sizing: content-box
        box-sizing: content-box
        height: auto
        padding-top: 60px
        & .content
          padding-bottom: 60px
        &.active
          display: block
        .con-title
          font-size: 28px
        &.step
          font-size: 0
          .step-item
            display: inline-block
            margin-right: 40px
            text-align: center
            font-size: $font-medium
            vertical-align: middle
            .sb-bg
              wh(122px, 122px)
              &.it
                height: 40px
                background-position-x:30px
            .name
              display: block
          .img-box
            display: inline-block
            width: 458px
            vertical-align: middle
            font-size: 0
            text-align: center
            img
              display: inline-block
              width: 50%
        &.pic
          .content
            text-align: center
          &.min
            img
              width: 100%
        &.pics
          .pics-item
            display: inline-block
            text-align: center
            margin-right: 30px
            &.last-item
              display: inline-block
              line-height: 1
              margin-right: 0px
              font-size: 40px
            img
              width: 100%
        &.ico-list
          margin-right: -264px
          .ico-list-item
            margin-top: 40px
            .item-wrap
              display: inline-block
              text-align: center
              .sb-bg
                wh(102px, 102px)

  @media (max-width: 1200px)
    .module-one
      .tab-con
        .tab-con-item
          &.ico-list
            margin-right: -123px
          &.step
            .step-item
              margin-right: 0
              .sb-bg
                &.it
                  width: 60px
                  background-position-x: 3px
              .name
                display: block
            .img-box
              width: 339px
              img
                display: inline-block
                width: 50%
  @media (max-width: 765px)
    .module-one
      .tab
        .tab-item
          .item-wrap
            width: 82px
      .tab-con
        .tab-con-item
          &.ico-list
            margin-right: -26px
          &.step
            .step-item
              margin-right: 0
              .sb-bg
                &.it
                  width: 110px
                  background-position-x: 30px
              .name
                display: block
            .img-box
              padding-top: 40px
              width: 476px
              img
                display: inline-block
                width: 40%
          &.pic
            .content
              img
                width: 100%
          &.pics
            .pics-item
              margin-right: 10px
              &.last-item
                font-size: 20px
  </style>
